<template>
  <h1>Vue3{{ msg }}</h1>
  <h2>法外狂徒：{{ obj.name }}</h2>
</template>

<script>
/* 
💥setup 函数四个注意点：
  1. setup 函数是一个新的组件选项, 作为组件中 compositionAPI 的起点
  2. 从生命周期角度来看, setup 会在 beforeCreate 钩子函数之前执行
  3. setup 中不能使用 this, this 指向 undefined --- 💥💥特别注意
  4. 在模版中需要使用的数据和函数，需要在 `setup` 返回。
*/
  export default {
    name: "App",
    setup() {
      console.log(1111, "setup函数", this);   // 💥💥 this 指向 undefined
      // return 的数据可以在模板中使用
      return {
        msg: '就很棒~~',
        obj: { name: "张三" },
      };
    },
    beforeCreate() {
      console.log(2222, "beforeCreate函数", this);
    },
    created() {
      console.log(3333, "created函数", this);
    },
    beforeMount() {
      console.log(4444, "beforeMount函数");
    },
    mounted() {
      console.log(5555, "mounted函数");
      const h1 = document.querySelector("h1");
      console.log(h1);
    },
    beforeUpdate() {},
    updated() {},
    // 🔔 Vue3 不叫销毁组件，改名为卸载组件
    beforeUnmount() {},
    unmounted() {},
  };
</script>
